<!DOCTYPE html>
<html lang=en>
<!--
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
//-->
<head>
    <meta charset="utf-8">
    <link href="css/main.css" rel="stylesheet"></link>
    <link href="css/html5css3specific.css" rel="stylesheet"></link>
</head>
<body>
    <div class="clear">
        <nav class="clear links genericBorderRadius genericBoxShadow">
            <div class="linksHeader" id="toTransform">Generic examples</div>
            <ul>
                <li><a data-example-link href="controller/general/welcomeView">General Tests</a>
                </li>
                <li><a data-example-link href="controller/general/html5MainVelocityView">HTML5 Tasks</a>
                </li>
                <li><a data-example-link href="controller/hadoop/welcomeView">Hadoop</a>
                </li>
                <li><a data-example-link href="controller/cassandra/welcomeView">Cassandra</a>
                </li>
                <li><a data-example-link href="controller/mongoDB/welcomeView">MongoDB</a>
                </li>
                <li><a data-example-link href="controller/mySQL/welcomeView">MySQL</a>
                </li>
            </ul>
        </nav>
        
        <section class="hProduct genericBorderRadius genericBoxShadow floatR" itemscope itemtype="http://www.data-vocabulary.org/Product/">
            <details>
                <summary class="panelHeader" itemprop="name">Screenshots</summary>
                <article class="screenShotArticle">
                    
                    <div>
                        <figure>
                            <img data-img-summary="RequireJS JQuery Example" itemprop="image" src="images/screenshots/requireJSJQuerySS.jpg" alt="requireJSJQueryExample" />
                            <figcaption>RequireJS+JQuery Example</figcaption>
                        </figure>
                    </div>
                    
                    <div>
                        <figure>
                            <img data-img-summary="Canvas Example" itemprop="image" src="images/screenshots/canvasExample.jpg" alt="CanvasExample" />
                            <figcaption>Canvas Example</figcaption>
                        </figure>
                    </div>
                    
                    <div>
                        <figure>
                            <img data-img-summary="Hadoop Example" itemprop="image" src="" alt="HadoopExample" />
                            <figcaption>Hadoop Example</figcaption>
                        </figure>
                    </div>
                    
                    <div>
                        <figure>
                            <img data-img-summary="Various DB Example" itemprop="image" src="images/screenshots/mySQLWelcome.jpg" alt="VariousDBExample" />
                            <figcaption>Various DB Example [Just MySQL for now]</figcaption>
                        </figure>
                    </div>
                    
                </article>
            </details>
        </section>
    </div>
    
    <div class="clear">
        <section class="genericBorderRadius genericBoxShadow">
            <details>
                <summary class="panelHeader">Playground [left out items such as command, menu, meter, etcetera]</summary>
                
                <div class="columns">
                    
                    <div>
                        <div class="floatL">
                            <div class="clear">
                                <canvas></canvas>
                            </div>
                        </div>
                        <div class="floatR">
                            <div class="clear padDirectChildren5b">
                                <div>
                                   <button class="css3Button genericBorderRadius" onclick="sessionStorage.setItem('imageData', document.querySelector('canvas').getContext('2d').getImageData(0, 0, 300, 150)); ">Set Sess</button>
                                </div>
                                <div>
                                   <button class="css3Button genericBorderRadius" onclick="window.open(document.querySelector('canvas').toDataURL('image/png'));">Data Url</button>
                                </div>
                                <div>
                                   <button class="css3Button genericBorderRadius" onclick="document.querySelector('canvas').getContext('2d').drawImage(document.getElementById('videoElement'), 10, 10, 180, 80, 120, 70, 180, 80);">Copy Vid</button>
                                </div>
                                <div>
                                    Input: <input id="messageInput" type="text" style="width: 60px;"/>
                                </div>
                                <div>
                                    <button class="css3Button genericBorderRadius" onclick="messageTest();">Message me</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        &nbsp;
                    </div>
                    
                    <div style="width: 425px; height: 300px;" class="overflow clear">
	                    <iframe id="messagePlayground" src="iframes/messageIframeContent.html" style="width: 500px; height: 320px;"></iframe>
	                </div>
                    
                    <div class="columnsBreakBefore pad10b">
                        
                        <video controls x-webkit-airplay="allow" tabindex="0" style="width: 300px; height: 150px;" id="videoElement" poster="images/apache.png">
                            <!-- 
                            <source src="*.mp4" type='video/mp4; codecs="avc1.42#01E, mp4a.40.2"' >
                            <source src="*.webm" type='video/webm; codecs="vp8, vorbis"'>
                            <source src="*.ogg" type='video/orgg; codecs="theora, vorbis"'>
                             -->
                        </video>
                    </div>
                    
                    <div>
                        <iframe width="300px" height="150px" src="http://www.youtube.com/embed/9PRRCQWCvbc" frameborder="0" allowfullscreen></iframe>
                    </div>
                    <fieldset style="text-align:left;">
                        <legend>Main form inputs</legend>
                        <div class="floatL exampleListing">
                            <div>
                                <div>URL:</div> <div><input type="url" formnovalidate /></div>
                            </div>
                            <div>
                                <div>Date:</div> <div><input type="date" /></div>
                            </div>
                            <div>
                                <div>Time:</div> <div><input type="time" /></div>
                            </div>
                            <div>
                                <div>Month:</div> <div><input type="month" /></div>
                            </div>
                            <div>
                                <div>Progress:</div> <div><progress value="80%" max="100"></progress></div>
                            </div>
                            <div>
                                DataList: <input type="text" list="sampleList" required autocomplete />
                                            <datalist id="sampleList">
                                                <option label="First" value="0" />
                                                <option label="Second" value="1" />
                                            </datalist>
                            </div>
                        </div>
                        
                        <div class="floatR exampleListing">
                            <div>    
                                <div>Week:</div> <div><input type="week" /></div> 
                            </div>
                            <div>
                                <div>Number:</div> <div><input type="number" min="10" max="50" step="10" /></div> 
                            </div>
                            <div>
                                <div>Range:</div> <div><input type="range" min="0" max="100" id="rangeExp" role="slider"
                                            aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
                                            onchange="this.setAttribute('aria-valuenow', this.value)" /></div>
                                <output onforminput="value=rangeExp.value"></output>
                            </div>
                            <div>
                                <div>Search:</div> <div><input type="search" /></div>
                            </div>
                            <div>
                                <div>Color:</div> <div><input type="color" /></div>
                            </div>
                            <div>
                                <div>Email:</div> <div><input type="email" multiple /></div> 
                            </div>
                            <div>    
                                <div>Pattern:</div> <div><input type="text" pattern="[0-9]{3}" oninputchange="console.info('Have provided text for pattern ', this.value);" /></div>
                            </div>
                            
                        </div>
                        
                        <div class="clear pad10b">
                            File: <input type="file" multiple />
                            
                        </div>
                        
                        <div class="pad10b">
                            Drop: <div id="drop"></div>
                        </div>
                        
                        <div>
                            <audio controls autoplay loop>
                                <!--
                                <source src="*.mp3" type="audio/mp3">
                                <source src="*.wav" type="audio/wav">
                                <source src="*.ogg" type="audio/ogg"> 
                                 -->
                            </audio>
                        </div>
                    </fieldset>
                </div>
                
            </details>
        </section>
        
        <aside>
            <nav class="links genericBorderRadius genericBoxShadow">
                <div class="linksHeader">Project Links</div>
                <ul type="circle">
                    <li><a data-project-link href="http://code.google.com/p/jihoonkim-playground-arena/">Code</a>
                    </li> 
                </ul>
            </nav>
        </aside>
    </div>
    <script type="text/javascript" src="js/genericScript.js"></script>
    <script type="text/javascript">
        
        (function() {
            
        	/*
        	 * Note that data urls are embedded in the page, so they won't be cached across different pages. In another words 
        	 * declare them within css as background
        	 */
            var apacheImageBase64 = "",
                cancelEvent = function(e) { e = e || window.event; e.preventDefault(); return false; },
                canvas = document.querySelector("canvas"),
                apacheImg = new Image();
            
            apacheImg.addEventListener("load", function(event) {
                
                var ctx = canvas.getContext("2d");
                try{
                    ctx.drawImage(apacheImg, 10, 10, 180, 80, 120, 70, 180, 80);
                    //later possibly drawImage w/ video
                }catch(drawerror) {
                    console.error("Chrome has a different API then FF ", drawerror, arguments);
                    ctx.drawImage(apacheImg, 120, 70, 180, 80);
                }
                ctx.strokeStyle = "#E6E6FA";
                ctx.lineWidth = 3; 
                ctx.lineCap = 'round';
                ctx.lineJoin = 'bevel';
                
                var addColorStop = [{pos: 1, color: 'rgba(1,159,98,0)'}, {pos: 0.9, color: '#019F62'}, {pos: 0, color: '#A7D30C'}], 
                    radgrad = ctx.createRadialGradient(45,45,10,52,50,30), len = addColorStop.length;  
                while(len--){
                    var step = addColorStop[len];
                    radgrad.addColorStop(step.pos, step.color);
                }
                
                ctx.fillStyle = radgrad;
                ctx.fillRect(10, 10, 280, 130);
                
                var text = "Generic Example",
                    linGradient = ctx.createLinearGradient(60, 100, ctx.measureText(text).width, 100);
                linGradient.addColorStop(0, "#000000");
                linGradient.addColorStop(0.5, "#FF0000");

                ctx.fillColor = linGradient;
                ctx.font = "italic bold 13px Cursive, Tahoma, Verdana";
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";
                ctx.shadowColor = "#FF0000";
                ctx.shadowOffsetX = 4;
                ctx.shadowOffsetY = 4;
                ctx.shadowBlur = 5;

                //console.info(ctx.measureText("Generic Example"));
                ctx.fillText(text, 60, 100);
                
                var drawPaths = [{x: 170, y: 30}, {x: 150, y: 30}, {x: 165, y: 45}, {x: 157, y: 60}, {x: 180, y: 53}, {x: 203, y: 60}, {x: 195, y: 45}, {x: 210, y: 30}, {x: 190, y: 30} ],
                    drawPathsLen = drawPaths.length;
                 
                ctx.moveTo(180, 15);
                while(drawPathsLen--){
                    var coord = drawPaths[drawPathsLen];
                    ctx.lineTo(coord.x, coord.y);
                }
                ctx.closePath();
                ctx.stroke();
                ctx.fillStyle = "#FAFAD2";
                ctx.fill();
                
                ctx.save(); //do some other stuff later and possibly restore
            }, false);
            apacheImg.src = apacheImageBase64;
    
            var imageSrcGetter = /^.*?;(.*)/;
            var cancelIfNotSpecificType = function(event) {
    
                var result = imageSrcGetter.exec(event.dataTransfer.getData('text/plain'));
                if(result.length > 1){
                    return cancelEvent(event);
                }
            };
            
            canvas.addEventListener("dragenter", cancelIfNotSpecificType, false);
            canvas.addEventListener("dragover", cancelIfNotSpecificType, false);
            canvas.addEventListener("dragleave", cancelIfNotSpecificType, false);
            
            canvas.addEventListener("drop", function(event) {
                
                event = event || window.event;
                
                var result = imageSrcGetter.exec(event.dataTransfer.getData('text/plain'));
                if(result.length > 1){
                    event.preventDefault();
                    event.cancelBubble = true;
                    
                    var posx = event.pageX - canvas.offsetLeft, 
                        posy = e.pageY - canvas.offsetTop,
                        pasteImage = new Image();
                        
                    pasteImage.addEventListener("load", function(event) {
                        canvas.drawImage(pasteImage, posx, posy);
                    }, false);
                    pasteImage.src = result[1];
                } 
                return false;
            }, false);
            
            if(typeof Worker !== "undefined" && 
                    typeof SharedWorker !== "undefined"){
                try{
                    var shworker = new SharedWorker("js/worker.js");
                    shworker.port.start();
                    shworker.port.postMessage(JSON.stringify({taskClazz: "ns.GeolocationTask"}));
                    shworker.port.addEventListener("message", function(event) {
                        console.info("Worker Result ", event);
                        shworker.port.terminate();
                    }, false);
                    shworker.port.addEventListener("error", function(event) {
                        console.error("Worker Error ", event.message, event.filename, event.lineno);
                        shworker.port.terminate();
                    }, false);
                }catch(error) {
                    console.error("Should error out for FF 8");
                }
            }
            
            var drop = document.getElementById("drop");
            
            drop.addEventListener("dragenter", function(event) {
                drop.style.background = "rgba(0, 150, 0, .2)";
                return cancelEvent(event);
            }, false);
            drop.addEventListener("dragover", cancelEvent, false);
            drop.addEventListener("dragleave", function(event) {
                drop.style.background = "#FFFFFF";
                return cancelEvent(event);
            }, false);
            
            drop.addEventListener("drop", function(event) {
                /*
                 * To compensate for FF:
                 *    if you drop an image on the drop zone in FF it actually redirect the browser off to the value of 
                 *    getData('Text'). For you it looks like a link that is image sources and link hrefs. So that's easy, 
                 *    you prevent the browser's default action
                 */
                event = event || window.event;
                event.preventDefault();
                event.cancelBubble = true;
                
                var dataTransfer = event.dataTransfer, 
                    dropContent = null;
                
                if(dataTransfer.files){
                    dropContent = "File : ";
                    var fileListing = dataTransfer.files, fileLength = fileListing.length;
                    while(fileLength--) {
                        var fileInfo = fileListing[fileLength];
                        dropContent += fileInfo.name + "/" + fileInfo.size + ";";
                    }
                }else{
                    dropContent = event.dataTransfer.getData('text/plain');
                }
                this.innerHTML = dropContent;
                return false;
            }, false);
            
            //When one drops the image in IE or Chrome, you get "null" as the text in drop zone. Fix it by setting some data under the Text data type.
            var imgs = document.getElementsByTagName("img"), 
                length = imgs.length;
            
            while(length--) {
                imgs[length].addEventListener("dragstart", function(event) {
                    
                    event = event || window.event;
                    var dataTransfer = event.dataTransfer;
                    //event.dataTransfer.setData("Text", this.getAttribute("alt"));
                    dataTransfer.setData("text/plain", "Summary of image is: " + this.dataset.imgSummary + ";" + this.src);
                    dataTransfer.setDragImage(this, 0, 0);
                }, false);
    
                imgs[length].addEventListener("dragend", function(event) {
                    
                    event = event || window.event;
                    var target = event.target;
                    target.src = apacheImageBase64;
                }, false);
            }
    
            var messagePlayground = null,
                messageInput = null;
            function messageTest() {
                messagePlayground = messagePlayground || document.getElementById("messagePlayground"),
                messageInput = messageInput || document.getElementById("messageInput");
                messagePlayground.contentWindow.postMessage(messageInput.value, '*');
            }

            window.messageTest = messageTest;
        })();
    </script>
    
</body>
</html>